import React from 'react';
import { Link, hashHistory } from 'react-router';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import Survey from './survey';
import SurveyResult from './surveyresult';
import NormalHeaderBar from '../components/NormalHeaderBar';
import SimpleHeaderBar from '../components/simpleheaderbar';
import backGround from '../images/gradient_opacity80.png';
import ArticleImgs from './articlesImgs';

const styles={
    original:{
        display: "inline-block",
        lineHeight: "1.2em",
        padding: "0 6px",
        marginRight: "6px",
        borderRadius: "0.6em",
        border: "1px solid",
        fontWeight: "normal",
        marginBottom:"0.3em"
    }
}

export default class Article extends React.Component{

    handlePostComment(){
        var comment = this.refs.comment.refs.input.value;
        this.props.handlePostComment(comment);
        this.refs.comment.refs.input.value = '';
    }

    handlePostSurvey(answers) {
        this.props.handlePostSurvey(answers);
    }

    backTo() {
        hashHistory.goBack();
    }

    componentWillReceiveProps() {
        window.scrollTo(0,0);
    }

    orientationChange() {
        this.forceUpdate();
    }

    componentDidMount() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    componentWillUnmount() {
        window.removeEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    gotoComment() {
        let commentArea = document.querySelector('.comment-container');
        if(commentArea)
            commentArea.scrollIntoView(false);
    }
    menuClick(id) {
        hashHistory.push('articles/'+id+'/1/0');
    	var leftMenu = $("#leftBar");
        var sidebar = $(".sidebar");
        var body = $("body");
    	sidebar.removeClass("fa-arrow-left").addClass("fa-arrow-right");
    		leftMenu.animate({left:'-176px'});
            body.css({"position":'relative'}).animate({left:'0'});
            setTimeout(function(){
            	leftMenu.hide();
            },400);
    }


    render(){
    	
        let channels = [];
        if (this.props.channels !== undefined) {
            channels = this.props.channels;
        } else if (sessionStorage.channels !== undefined) {
            channels = JSON.parse(sessionStorage.channels);
        }
        var voteClass;
        if(this.props.vote.VoteResult){
            voteClass = 'fa fa-heart';
        }else{
            voteClass = 'fa fa-heart-o';
        }

        let survey;
        let surveyResult;
        if (this.props.survey != null) {
            survey = <Survey survey={this.props.survey} redirecthref={this.props.redirectUrl} handlePostSurvey={this.handlePostSurvey.bind(this)} />
        }
        if (this.props.surveyResult != null) {
            survey = <SurveyResult surveyResult={this.props.surveyResult} />
        }
        var comments = [];  
        this.props.comments.map(function(comment){
            let replies = []
            if (comment.Replies) {
                comment.Replies.map(function(reply) {
                replies.push(
                    <div className="comment-reply" key={reply.Id}>
                        <span className="fa fa-user" aria-hidden="true"></span>
                        <span style={{marginLeft:"0.5rem"}}>回复</span>
                        <span style={{marginLeft:"0.5rem"}}>({reply.CommentDateUtcText})</span>:
                        <div>{reply.CommentText}</div>
                    </div>);
                });
            }
            
            comments.push(
                <div key={comment.Id} style={{borderBottom: "1px dotted #7e7e7e"}}>
                    <span className="fa fa-user" aria-hidden="true"></span>
                        <span style={{marginLeft:"0.5rem"}}>用户</span>
                        <span style={{marginLeft:"0.5rem"}}>({comment.CommentDateUtcText})</span>:
                    <div className="comment-text">{comment.CommentText}</div>
                    {replies}
                </div>
            );
        });
        if (this.props.article.FileList != undefined && this.props.article.FileList.length > 0) {
            let imgs = []
            let height = document.body.clientWidth*0.75;
            this.props.article.FileList.map(function(item){
                imgs.push(<img key={new Date().getTime() + ''} style={{width:"100%",height:height}} src={item}/>)
            });
            let body = undefined;
            if (sessionStorage.token == undefined ) {
                body = <div style={{textAlign: "center",marginBottom:"1rem",height: "3rem"}}><a id="bottom-btn" style={{display: "block",margin: "0 10%",width:"80%"}} className="btn btn-success btn-block btn-ran-0" href={this.props.redirectUrl}><span>请先登录</span></a></div>;
            } else if (this.props.article.IsCommentAllowed == false) {
                body = (<div></div>);
            } else {
                body = (<div><div style={{margin:"0.5rem 0.5rem 0.2rem 0.5rem",display:"block"}}>
                            <Input style={{marginBottom:"0.5rem"}} type="textarea" ref="comment" placeholder="添加评论" autosize={{ minRows: 3, maxRows: 3 }} />
                            <Button type="primary" onClick={this.handlePostComment.bind(this)}>添加评论</Button>
                        </div>
                        <div className="comment-container">
                            {comments}
                        </div></div>);
            }
            return(
                <div>
                    <SimpleHeaderBar channels={channels} isSearch={true} menuClick={this.menuClick.bind(this)} title={this.props.article.Title}/>
                    <div id="article-buttons"  style={{top: "3.5rem",zIndex: "999"}}>
                        {
                            sessionStorage.token && (<div className="article-button" onClick={this.props.handlePostVote.bind(this, this.props.article.Id)}>
                                <i className={voteClass} aria-hidden="true"></i>{this.props.vote.VoteCount}
                            </div>)
                        }
                        {this.props.article.IsCommentAllowed &&
                        (<div className="article-button" onClick={this.gotoComment.bind(this)}>
                            <i className="fa fa-commenting-o" aria-hidden="true"></i>{this.props.comments.length}
                        </div>)
                        }
                        {
                            sessionStorage.token && this.props.article.FileUrl && (<div className="article-button">
                                <a href={this.props.article.FileUrl} style={{color: "#fff"}}><i className="fa fa-download" aria-hidden="true"></i></a> 
                            </div>)
                        }
                    </div>
                    <ArticleImgs imgs={imgs}/>
                    {sessionStorage.token && survey}
                    {body}
                </div>
                );
        } else if (this.props.article.Body == undefined || this.props.article.Body.length <=0) {
            return (
                <div>
                    <SimpleHeaderBar channels={channels} isSearch={true} menuClick={this.menuClick.bind(this)} title={this.props.article.Title}/>
                    {survey}
                </div>
            );

        } else {
            var backTitle = "url(" + backGround + ")";
            let body = undefined;
            if (sessionStorage.token == undefined ) {
                body = <div style={{textAlign: "center",marginBottom:"1rem",height: "3rem"}}><a id="bottom-btn" style={{display: "block",margin: "0 10%",width:"80%"}} className="btn btn-success btn-block btn-ran-0" href={this.props.redirectUrl}><span>请先登录</span></a></div>;
            } else if (this.props.article.IsCommentAllowed == false) {
                body = (<div></div>);
            } else {
                body = (<div><div style={{margin:"0.5rem 0.5rem 0.2rem 0.5rem",display:"block"}}>
                            <Input style={{marginBottom:"0.5rem"}} type="textarea" ref="comment" maxLength={400} placeholder="添加评论" autosize={{ minRows: 3, maxRows: 3 }} />
                            <Button type="primary" onClick={this.handlePostComment.bind(this)}>添加评论</Button>
                        </div>
                        <div className="comment-container">
                            {comments}
                        </div></div>);
            }
            return( 
                <div>
                   <SimpleHeaderBar channels={channels} isSearch={true} menuClick={this.menuClick.bind(this)}/>
                    <div id="ArticleBody" style={{backgroundColor:"white",fontSize:"0.9rem"}}>
                        <div style={{position: "relative"}}>
                            <img src={this.props.article.Image} style={{width:"100%"}}/>
                            <div className="branding-title" style={{ backgroundImage: backTitle, backgroundSize:"100% 100%",backgroundRepeat:"no-repeat",width:"100%",height:"98%"  }}>
                            </div>
                            <div id="article-buttons">
                                {
                                sessionStorage.token && (<div className="article-button" onClick={this.props.handlePostVote.bind(this, this.props.article.Id)}>
                                        <i className={voteClass} aria-hidden="true"></i>{this.props.vote.VoteCount}
                                    </div>)
                                }
                                {this.props.article.IsCommentAllowed &&
                                (<div className="article-button" onClick={this.gotoComment.bind(this)}>
                                    <i className="fa fa-commenting-o" aria-hidden="true"></i>{this.props.comments.length}
                                </div>)
                                }
                                {
                                    sessionStorage.token && this.props.article.FileUrl && (<div className="article-button">
                                        <a href={this.props.article.FileUrl} style={{color: "#fff"}}><i className="fa fa-download" aria-hidden="true"></i></a> 
                                    </div>)
                                }
                            </div>
                            <div id="article-title">
                                <h2><b>{this.props.article.Title}</b></h2>
                                <h5 className="small-font">
                                    {
                                        this.props.article.IsOriginal&&this.props.article.ArticleType==0&&(<span style={{...styles.original}}>原创</span>)
                                    }
                                    {this.props.article.PublishedDate}
                                </h5>
                            </div>
                        </div>
                        <div className="article-style" style={{margin:"15px", textAlign:"left", lineHeight:"24px"}} dangerouslySetInnerHTML={{__html: this.props.article.Body}} />
                    </div>
                    {sessionStorage.token && survey}
                    {body}
                </div>
            );
        }
    }
}